<template>
  <!-- 菜单管理页面组件 -->
  <div class="RootBox">
    <!-- 面包屑导航 -->
    <div class="wanjun">
      <div class="mbnav">
        <div class="mbnavson">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
            <el-breadcrumb-item>后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限集管理</el-breadcrumb-item>
            <el-breadcrumb-item>新建权限集</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="formList">
          <!-- 表单控件 -->
          <el-form :model="form">
            <div class="formbox">
              <el-form-item label="权限集编码" :label-width="formLabelWidth">
                <el-input v-model="form.code" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="权限集名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述信息" :label-width="formLabelWidth">
                <el-input v-model="form.comments" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="排序序号" :label-width="formLabelWidth">
                <el-input v-model="form.sort" autocomplete="off"></el-input>
              </el-form-item>
            </div>
            <div class="formbox1">
              <el-form-item label="权限集授权" :label-width="formLabelWidth">
                <el-tree
                  ref="MenuTree"
                  :data="data"
                  show-checkbox
                  node-key="id"
                  :props="defaultProps"
                  default-expand-all
                ></el-tree>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <div>
        <el-button type="primary" @click="submitUser">确 定</el-button>
        <el-button>取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import apiConfig from '@/utils/tools/authorityApi/apiConfig'
import { axiosUtil } from '@/utils/tools/authorityApi/axiosUtil'
export default {
  data() {
    return {
      dialogFormVisible: false, // 弹出层显示or隐藏
      form: {
        // 表单权限集验证数据

        name: '',
        code: '',
        comments: '',
        sort: '',
        weight: 1,
        menuIds: ''
      },
      formLabelWidth: '120px',
      //   树形组件数据
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    handleClick(tab, event) {},
    // 获取菜单数据
    getMenuList() {
      let that = this
      let url = apiConfig.API.sysMenuApi.getMenuTreeUrl
      let data = ''
      axiosUtil.postJson(url, data, function (res) {
        that.data = res
      })
    }
  }
}
</script>
<style lang="less" scoped>
.RootBox {
  background-color: #fff;
  height: 100%;
}
.mbnav {
  height: 100%;
  background-color: #fff;
  .mbnavson {
    height: 51px;
    margin-left: 24px;
    line-height: 51px;
    border-bottom: 1px solid #4285f4;
  }
}
/deep/ .el-breadcrumb__separator[class*='icon'] {
  color: #4285f4;
}
/deep/.el-breadcrumb__inner {
  color: #4285f4 !important;
  font-size: 14px;
}
.formbox {
  margin-top: 30px;
  display: flex;
}
.formbox1 {
  margin-top: 60px;
}
.dialog-footer {
  text-align: center;
}
/deep/.el-tree {
  padding-top: 7px;
  height: 520px;
  overflow-y: scroll;
}
/deep/.el-form-item {
  margin-bottom: 0;
}
/deep/.el-button--primary {
  margin-right: 50px;
}
</style>
